<template>
    <!-- 车间存量查询 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="workshopCancelStocks">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="流转卡号">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="开发日期">
                                <a-range-picker  popup-container="html"  :defaultValue="[Date.now(), Date.now()]" class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="工序">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="车间">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="计划单号">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="工段">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="客户名称">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="布号">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="色号">
                                 <a-input class="bacClass"  allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="流转卡完成情况">
                                <a-select popup-container="html"  class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已完成">已完成</a-option>
                                    <a-option value="未完成">未完成</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="缸卡终止情况">
                                <a-select popup-container="html"  class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已终止">已终止</a-option>
                                    <a-option value="未终止">未终止</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="是否回修">
                                <a-select popup-container="html"  class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="回修">回修</a-option>
                                    <a-option value="正常">正常</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="110px"  :style="{width:'340px'}" label="订单类型">
                                <a-select popup-container="html"  class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="内加工">内加工</a-option>
                                    <a-option value="未加工">未加工</a-option>
                                </a-select>
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin-bottom: 10px;">
                        <Toolbar :items="['查询']" @select="selectHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <div style="height:100%;">
                        <a-tabs   :lazy-load="true" justify :default-active-key="1" trigger="click" @change="changHandler">
                            <a-tab-pane :key="1" title="车间存量明细">
                                    <stockDetail :searchData="searchData" />
                            </a-tab-pane>
                            <a-tab-pane :key="2" title="工段汇总">
                                    <sectionSummary :searchData="searchData" />
                            </a-tab-pane>
                            <a-tab-pane :key="3" title="工序汇总">
                                    <operatioSymmary :searchData="searchData" />
                            </a-tab-pane>
                            <a-tab-pane :key="4" title="工艺类型汇总">
                                    <processTypeSymmary :searchData="searchData" />
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </template>
            </PageTabelLayout>
        </div>
    </div>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";
export default {
    name: 'workshopStockSelect',
    components: { PageTabelLayout },
    setup() {
        let headerShow = ref<boolean>(true);
        let handlerState = ref<number>(1);
        const searchData = ref({});
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        onMounted(() => {
            emitter.emit('window-change');
            selectHandler();
        });
        const changHandler = (e: number | string) => {
            handlerState.value = +e;
            selectHandler();
        };
        const selectHandler = () => {
            emitter.emit('window-change');
            if (handlerState.value === 1) {
                emitter.emit('refresh-stockDetail');
            } else if (handlerState.value === 2) {
                emitter.emit('refresh-sectionSummary');
            } else if (handlerState.value === 3) {
                emitter.emit('refresh-operatioSymmary');
            } else {
                emitter.emit('refresh-processTypeSymmary');
            }
        };

        return {
            headerShow,
            handlerState,
            changHandler,
            selectHandler,
            changHeadShow,
            searchData
        }
    }
}

</script>

<style scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}


.bacClass {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.bacClassLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>